<template>
    <div>
        支出账户：
        <el-select v-model="qo.accounts" multiple collapse-tags collapse-tags-tooltip 
            :max-collapse-tags="2" placeholder="请选择" style="width: 160px">
            <el-option v-for="item in accountType" 
                :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        支出分类：
        <el-cascader v-model="qo.cascadeOptions" placeholder="可搜索" 
            :options="expenditureType" filterable clearable />
        支出日期开始
        <el-date-picker v-model="qo.expenditureDateStart" type="date" placeholder="选择日期"
             style="width: 140px" value-format="x"/>
        支出日期结束
        <el-date-picker v-model="qo.expenditureDateEnd" type="date" placeholder="选择日期" 
            style="width: 140px" value-format="x"/>
        备注：
        <el-input
            v-model="qo.remarks"
            style="width: 240px"
            placeholder="Please input"
            clearable
        />

        
    </div>

    <div>
        <el-row>
            <el-col :span="3">
                <el-button type="success" @click="addUpdateDialog('add',{})">新增</el-button>
                 <el-button type="success" @click="expenditureList">查询</el-button>
            </el-col>
            <el-col :span="6">
                <el-statistic title="当前查询支出总计" :value="moneySum" />
            </el-col>
        </el-row>
        
    </div>

    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="expenditureDate" :formatter="formatterDate" label="支出日期" width="180" />
            <el-table-column prop="secondName" label="二级支出" width="180" />
            <el-table-column prop="money" label="金额" width="180" />
            <el-table-column prop="accountName" label="账户" />
            <el-table-column prop="remarks" label="备注" />
            <el-table-column fixed="left" label="操作" width="120">
                <template v-slot:default="scope">
                    <el-button link type="primary" size="small" 
                        @click="addUpdateDialog('updata', scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="demo-pagination-block" style="">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="countNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="addAndUpdataDialogVisible" title="Notice" width="30%" destroy-on-close center draggable>
        <el-form :model="form" label-width="120px">
            <el-form-item label="支出日期">
                <el-date-picker v-model="form.expenditureDate" type="datetime" 
                    placeholder="选择日期" style="width: 100%" 
                    :default-time="new Date()"
                    value-format="x"/>
            </el-form-item>
            <el-form-item label="支出金额">
                <el-input-number v-model="form.money" :precision="2" :step="1" />
            </el-form-item>
            <el-form-item label="支出账户">
                <el-select v-model="form.account" placeholder="请选择支出账户">
                    <el-option v-for="item in accountType" :key="item.id" :label="item.name" 
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="支出分类">
                <el-cascader v-model="form.firstAndSecond" placeholder="可搜索" :options="expenditureType" filterable />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remarks" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">Create</el-button>
                <el-button @click="addAndUpdataDialogVisible = false">Cancel</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog v-model="uploadFileDialogVisible" title="Notice" width="30%" destroy-on-close center draggable>
    </el-dialog>

</template>
<script>
import { reactive, toRefs, onBeforeMount } from 'vue'
import moment from "moment"

import { expenditure, addExpenditre, updateExpenditre,expenditureListCount } from '../../api/finance.js'
import { $dictionaryList,$listCascade } from '../../api/dictionary.js'

export default {
    name: 'finance',
    setup() {
        let data = reactive({
            tableData: [],
            pageSize: 10,
            countNum:10,
            currentPage: 1,
            moneySum:0,
            qo: {},
            addAndUpdataDialogVisible: false,
            uploadFileDialogVisible:false,
            addAndUpdataType:'',
            form: {},
            accountType:[],
            expenditureType:[],
            options: [
                {
                    value: 'Option1',
                    label: 'Option1',
                }
            ]
        })

        let addUpdateDialog = (type,row) => {
            data.addAndUpdataDialogVisible = true
            data.addAndUpdataType = type
            if (data.addAndUpdataType === 'add') {
                data.form.money = null,
                data.form.remarks = ''
                data.form.expenditureDate = new Date()
            }
            if (data.addAndUpdataType === 'updata') {
                data.form = row
                data.form.firstAndSecond = [row.firstItem,row.secondItem]
            }
        }

        let save = async ()=>{
            if (data.addAndUpdataType === 'add') {
                let result = await addExpenditre(data.form)
            }
            if (data.addAndUpdataType === 'updata') {
                let result = await updateExpenditre(data.form)
            }
            expenditureList()
            data.addAndUpdataDialogVisible = false
            
        }

        let dictionaryList = async () => {
            data.accountType = await $dictionaryList({ type: "account_type",isTop:false })
        }
        dictionaryList()
        
        let listCascade = async () => {
            data.expenditureType = await $listCascade({type: "expenditure_type"})
        }
        listCascade()

        let listCount = async (qo)=>{
            let vo  = await expenditureListCount(qo)
            data.countNum = vo.countNum
            data.moneySum = vo.money
        }
        
        let expenditureList = async () => {
            let qo = { 
                pageSize: data.pageSize, currentPage: data.currentPage, 
                accounts: data.qo.accounts,
                cascadeOptions: data.qo.cascadeOptions 
                ,expenditureDateStart:data.qo.expenditureDateStart
                ,expenditureDateEnd:data.qo.expenditureDateEnd
                ,remarks: data.qo.remarks
            }
            data.tableData = await expenditure(qo)

            listCount(qo)
        }
        expenditureList()

        const handleSizeChange = (number) => {
            data.pageSize = number
            expenditureList()
        }
        const handleCurrentChange = (number) => {
            data.currentPage = number
            expenditureList()
        }

        let formatterDate = (row,column)=>{
           return moment(new Date(row.expenditureDate)).format('YYYY-MM-DD HH:mm:ss')
        }

        return {
            ...toRefs(data),
            expenditureList,
            handleSizeChange,
            handleCurrentChange,
            addUpdateDialog,
            save,
            formatterDate
        }
    }
}
</script>
<style scoped lang='scss'></style>
